<template>
  <div style="display: inline-block;min-width: 100%">
    <div class="search-bar">
      <Row>
        <!--  <div style="float: left;">
			<Menu mode="horizontal" @on-select="tabSelect" active-name="累积用量">
			  <MenuItem name="累积用量">
				<i class="monitor icon-electric"></i>
				<span>累积用量</span>
			  </MenuItem>
			  <MenuItem name="实时流量">
				<i class="monitor icon-water"></i>
				<span>实时流量</span>
			  </MenuItem>
			</Menu>
		  </div>

		  <div style="float: left;">
			<span class="line"></span>
		  </div>-->

        <div style="float: left;margin-left: 18px;">
          <RadioGroup v-model="params.lidu" @on-change="radioChage">
            <Radio :label="item.value" v-for="(item, index) in liduSelections" :key="index" style="font-size: 18px;margin-right: 25px">{{item.name}}
            </Radio>
          </RadioGroup>
        </div>
        <div style="float: left;">
          <span class="line"></span>
        </div>
        <div style="float: left;">
          <DatePicker :transfer="true" style="width: 200px;" type="datetime" placeholder="时间点"
                      v-model="params.singTime" @on-change="timeChange"></DatePicker>
        </div>
        <!--  <div style="float: right;margin-right: 15px">
            <Button type="primary" @click="doSearch" style="width: 150px;">查询数据</Button>
          </div>-->
      </Row>
    </div>
    <div class="picture">
      <div class="opop1">
        <div class="opop2">
          <div class="ddaa">
            <div class="da">
              <span>供水总管·趋势图</span>
            </div>
            <div class="daa">
              <RadioGroup v-model="props.propA" type="button" size="small" @on-change="propaChange">
                <Radio label="累积水量"></Radio>
                <Radio label="瞬时水量"></Radio>
              </RadioGroup>
            </div>
          </div>
          <div id="chartAssb1" style="width: 100%;height: 250px;"></div>
        </div>
        <div class="opop5">
        </div>
        <div class="opop3">
          <div class="ddaa">
            <div class="ddaa">
              <div class="da">
                <span>用水占比图</span>
              </div>
            </div>
          </div>
          <div id="chartBb2" style="width: 100%;height: 250px;"></div>
        </div>
      </div>
      <div class="opop1" style="margin-top: 10px;">
        <div class="opop2">
          <div class="ddaa">
            <div class="da">
              <span>耗电量·趋势图</span>
            </div>
            <div class="daa">
            </div>
          </div>
          <div id="chartAss2b3" style="width: 100%;height: 250px;"></div>
        </div>
        <div class="opop5">
        </div>
        <div class="opop3">
          <div class="ddaa">
            <div class="ddaa">
              <div class="da">
                <span>耗能占比图</span>
              </div>
            </div>
          </div>
          <div id="chartB2B2b4" style="width: 100%;height: 250px;"></div>
        </div>
      </div>
      <div class="opop4">
        <div class="ddaa">
          <div class="ddaa">
            <div class="da">
              <span>车间用水·趋势图</span>
            </div>
            <div class="daa">
              <RadioGroup v-model="props.propX" type="button" size="small" @on-change="propIDChange">
                <Radio :label="item.name" v-for="(item, index) in workShopName" :key="index"></Radio>
              </RadioGroup>
              <RadioGroup v-model="props.propC" type="button" size="small" @on-change="propcChange">
                <Radio label="累积水量"></Radio>
                <Radio label="瞬时水量"></Radio>
              </RadioGroup>
            </div>
          </div>
        </div>
        <div id="chartCb5" style="width: 100%;height: 250px;right: 30px;"></div>
      </div>
    </div>
    <!--<div class="picture">
      <div class="bdss">
          <Row>
            <div class="kki">
              <span style="font-size: 14px;">总管供量(m³)</span>
            </div>
            <div class="monkey1">
              455434544
            </div>
            <div class="monkey">
              <span style="font-size: 14px;color: darkgrey;">2018-12-20 15</span>
            </div>
          </Row>
      </div>
      <div class="bdssee">
      </div>
      <div class="dssx">
        <div class="ddssoo" v-for="(item, index) in workShopName" :key="index">
          <Row>
            <div class="kkir">
              <span>{{item.name}}(m³)</span>
            </div>
            <div class="monkey22">
              {{item.num}}
            </div>
          </Row>
        </div>
      </div>
    </div>-->
  </div>
</template>

<!--suppress JSAnnotator -->
<script>
  export default {
    name: 'DataCharts',
    mounted: function () {
      this.initCharts()
      // 加载总数据---33
      this.loadDatas()
    },
    data () {
      return {
        params: {
          type: '',
          types: '',
          name: '',
          singTime: new Date().format('yyyy-MM-dd hh:mm:ss'),
          lidu: '%Y-%m-%d %H'
        },
        props: {
          propA: '累积水量',
          propC: '累积水量',
          propX: '树脂'
        },
        charts: {
          chartA: null,
          chartA2: null,
          chartB: null,
          chartB2: null,
          chartC: null
        },
        chartOptions: {
          optionA: {
            title: {
              text: '',
              subtext: '',
              left: 'center',
              top: 'bottom'
            },
            toolbox: {
              feature: {
                magicType: {type: ['line', 'bar']},
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              data: []
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            yAxis: [
              {
                type: 'value',
                name: '累积冷量',

                axisLabel: {
                  formatter: '{value} t'
                }
              }
            ],
            grid: {
              left: '8%',
              right: '8%'
            },
            series: [{
              data: [],
              type: 'line',
              animation: true,
              animationThreshold: 2500,
              addDataAnimation: true,
              animationDuration: 2000,
              animationEasing: 'ExponentialOut'
            }]
          },
          optionA2: {
            title: {
              text: '',
              subtext: '',
              left: 'center',
              top: 'bottom'
            },
            toolbox: {
              feature: {
                magicType: {type: ['line', 'bar']},
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              data: []
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            yAxis: [
            ],
            grid: {
              left: '8%',
              right: '8%'
            },
            series: [{
              data: [],
              // type: 'line',
              animation: true,
              animationThreshold: 2500,
              addDataAnimation: true,
              animationDuration: 2000,
              animationEasing: 'ExponentialOut'
            }]
          },
          optionB: {
            color: ['#ed4014', '#515a6e', '#dcdee2', '#FF7F50', '#2b85e4', '#A52A2A', '#FFD700', '#00FF7F'],
            title: {
              text: '',
              subtext: '',
              x: 'center'
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data: []
            },
            series: [
              {
                name: '用能占比',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          },
          optionB2: {
            color: ['#ed4014', '#515a6e', '#dcdee2', '#FF7F50', '#2b85e4', '#A52A2A'],
            title: {
              text: '',
              subtext: '',
              x: 'center'
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data: []
            },
            series: [
              {
                name: '用能占比',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          },
          optionC: {
            xAxis: {
              type: 'category',
              data: []
            },
            toolbox: {
              feature: {
                magicType: {type: ['line', 'bar']},
                saveAsImage: {}
              }
            },
            tooltip: {},
            yAxis: {
              type: 'value',
            },
            grid: {
              left: '5%',
              right: '5%'
            },
            series: [{
              data: [],
              type: 'line'
            }]
          }
        },
        tabActive: '累积用量',
        liduSelections: [
          // {
          //   name: '分',
          //   value: '%Y-%m-%d %H:%i'
          // },
          {
            name: '时',
            value: '%Y-%m-%d %H'
          },
          {
            name: '天',
            value: '%Y-%m-%d'
          },
          {
            name: '月',
            value: '%Y-%m'
          }
        ],
        workShopName: [
          {
            name: '树脂',
            id: 153
          },
          {
            name: '机加',
            id: 154
          },
          {
            name: '冲压',
            id: 155
          },
          {
            name: '焊装',
            id: 156
          },
          {
            name: '涂装',
            id: 157
          },
          {
            name: '总装',
            id: 158
          },
          {
            name: '铸造',
            id: 159
          }
        ]
      }
    },
    methods: {
      loadCartsDatas: function () {
        if (this.charts.chartA !== null) {
          if (this.params.singTime instanceof Date) {
            this.params.singTime = this.params.singTime.format('yyyy-MM-dd hh:mm:ss')
          }
          this.loadDatas()
        }
      },
      radioChage (txt) {
        this.loadDatas()
      },
      timeChange (txt) {
        this.loadDatas()
      },
      propaChange (txt) {
        this.loadChartA()
      },
      propcChange (txt) {
        this.loadChartC()
      },
      propIDChange (txt) {
        this.loadChartC()
      },
      loadChartA () {
        this.charts.chartA.showLoading({text: '请求数据.....'})
        this.params.dataType = this.props.propA
        this.params.devId = 104
        if (this.params.singTime instanceof Date) {
          this.params.singTime = this.params.singTime.format('yyyy-MM-dd hh:mm:ss')
        }
        window.myapi.do_post('file/charts', this.params).then(resp => {
          if (resp.status === 200) {
            this.charts.chartA.clear()
            let result = resp.data.data
            if (this.props.propA === '累积水量') {
              this.chartOptions.optionA.title = {
                text: result.title,
                textStyle: {
                  color: '#d3d3d3',
                  fontSize: 14
                },
                left: 'center',
                top: 'bottom'
              }
              this.chartOptions.optionA.grid = {
                left: '3%',
                right: '1%',
                top: '25%',
                bottom: '10%',
                containLabel: true
              }
              // this.chartOptions.optionA.tooltip = {
              //   formatter: '{b} ：  {c}  m³',
              //   trigger: 'axis'
              // }
              this.chartOptions.optionA.legend = {
                data: ['累积水量', '耗电量', '能耗比']
              }
              this.chartOptions.optionA.xAxis = {
                data: result.xData,
                boundaryGap: '5%',
                axisLabel: {
                  // 坐标轴刻度标签的相关设置。
                  // interval: 0,
                  // rotate: '20'
                }
              }
              this.chartOptions.optionA.yAxis = [
                {
                  type: 'value',
                  name: '累积水量(t)',

                  splitLine: {
                    show: false
                  }
                },
                {
                  type: 'value',
                  name: '能耗比(%)',
                  min: 0,
                  max: 100,
                  interval: 20,
                  splitLine: {
                    show: false
                  }
                }

              ]
              this.chartOptions.optionA.series = [{
                name: '累积水量',
                data: result.yData,
                type: 'bar',
                itemStyle: {
                  color: '#2d8cf0'
                },
                hoverAnimation: true
              },
                {
                  name: '能耗比',
                  data: result.zData,
                  type: 'line',
                  yAxisIndex: 1,
                  itemStyle: {
                    color: '#ed4014'
                  },
                  hoverAnimation: true
                }
              ]
            }
            if (this.props.propA === '瞬时水量') {
              this.chartOptions.optionA.title = {
                text: result.title,
                textStyle: {
                  color: '#d3d3d3',
                  fontSize: 14
                },
                left: 'center',
                top: 'bottom'
              }
              this.chartOptions.optionA.tooltip = {
                formatter: '{b} ：  {c}  t/min',
                trigger: 'axis'
              }
              this.chartOptions.optionA.xAxis.data = result.xData
              this.chartOptions.optionA.yAxis = [
                {
                  type: 'value',
                  name: '瞬时水量(t/min)',
                  splitLine: {
                    show: false
                  }
                }
              ]
              this.chartOptions.optionA.series = [{
                data: result.yData,
                type: 'line',
                smooth: true,
                showSymbol: false
              }]
            }
            this.charts.chartA.setOption(this.chartOptions.optionA, true)
            this.charts.chartA.hideLoading()
            this.charts.chartA.resize()
          }
        }).finally(() => {
        })
      },
      loadChartA2() {
        this.charts.chartA2.showLoading({text: '请求数据.....'})
        this.params.dataType = this.props.propA
        this.params.devId = 104
        if (this.params.singTime instanceof Date) {
          this.params.singTime = this.params.singTime.format('yyyy-MM-dd hh:mm:ss')
        }
        window.myapi.do_post('file/charts', this.params).then(resp => {
          if (resp.status === 200) {
            this.charts.chartA2.clear()
            let result = resp.data.data
            this.chartOptions.optionA2.title = {
              text: result.title,
              textStyle: {
                color: '#d3d3d3',
                fontSize: 14
              },
              left: 'center',
              top: 'bottom'
            }
            this.chartOptions.optionA2.grid = {
              left: '3%',
              right: '1%',
              top: '25%',
              bottom: '10%',
              containLabel: true
            }
            this.chartOptions.optionA2.legend = {
              data: []
            }
            this.chartOptions.optionA2.xAxis = {
              data: result.xData,
              boundaryGap: '5%',
              axisLabel: {
                // 坐标轴刻度标签的相关设置。
                // interval: 0,
                // rotate: '20'
              }
            }
            this.chartOptions.optionA2.yAxis = [
              {
                type: 'value',
                name: '耗电量(kwh)',
                position: 'left',
                offset: 0,
                // color: '#6661be',
                scale: true,
                splitLine: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    // color: '#6661be'
                  }
                }
              }
            ]
            this.chartOptions.optionA2.series = [
              {
                name: '耗电量',
                data: result.wData,
                type: 'bar',
                itemStyle: {
                  color: '#41b9be'
                },
                hoverAnimation: true
              }
            ]
            this.charts.chartA2.setOption(this.chartOptions.optionA2, true)
            this.charts.chartA2.hideLoading()
            this.charts.chartA2.resize()
          }
        }).finally(() => {
        })
      },
      loadChartB () {
        if (this.params.singTime instanceof Date) {
          this.params.singTime = this.params.singTime.format('yyyy-MM-dd hh:mm:ss')
        }
        this.charts.chartB.showLoading({text: '请求数据.....'})
        this.params.dataType = '用能占比'
        window.myapi.do_post('file/charts', this.params).then(resp => {
          if (resp.status === 200) {
            this.charts.chartB.clear()
            let result = resp.data.data
            this.chartOptions.optionB.title = {
              text: result.title,
              textStyle: {
                color: '#d3d3d3',
                fontSize: 14
              },
              left: 'center',
              top: 'bottom'
            }
            this.chartOptions.optionB.series[0] = {
              name: '用能占比',
              type: 'pie',
              radius: '42%',
              center: ['60%', '50%'],
              data: result.data,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              label: {
                normal: {
                  formatter: '{b|{b}}\n {c}  {per|{d}%}  ',
                  backgroundColor: 'rgba(0,0,0,0.5)',
                  borderRadius: 3,

                  rich: {
                    b: {
                      fontSize: 10,
                      lineHeight: 15,
                      align: 'left',
                      color: '#fff',
                      padding: [2, 4]
                    },
                    c: {
                      fontSize: 10,
                      lineHeight: 15,
                      align: 'left',
                      padding: [2, 4]
                    },
                    per: {
                      fontSize: 10,
                      lineHeight: 15,
                      color: '#eee',
                      backgroundColor: '#334455',
                      padding: [0, 2],
                      borderRadius: 1
                    }
                  }
                }
              }
            }
            this.chartOptions.optionB.legend = {
              orient: 'vertical',
              left: 'left',
              data: result.legend
            }
            this.charts.chartB.setOption(this.chartOptions.optionB, true)
            this.charts.chartB.hideLoading()
            this.charts.chartB.resize()
          }
        }).finally(() => {
        })
      },
      loadChartB2() {
        if (this.params.singTime instanceof Date) {
          this.params.singTime = this.params.singTime.format('yyyy-MM-dd hh:mm:ss')
        }
        this.charts.chartB2.showLoading({text: '请求数据.....'})
        this.params.dataType = '用能占比'
        window.myapi.do_post('file/charts2', this.params).then(resp => {
          if (resp.status === 200) {
            this.charts.chartB2.clear()
            let result = resp.data.data
            this.chartOptions.optionB2.title = {
              text: result.title,
              textStyle: {
                color: '#d3d3d3',
                fontSize: 14
              },
              left: 'center',
              top: 'bottom'
            }
            this.chartOptions.optionB2.series[0] = {
              name: '用能占比',
              type: 'pie',
              radius: '42%',
              center: ['60%', '50%'],
              data: result.data,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              label: {
                normal: {
                  formatter: '{b|{b}}\n {c}  {per|{d}%}  ',
                  backgroundColor: 'rgba(0,0,0,0.5)',
                  borderRadius: 3,

                  rich: {
                    b: {
                      fontSize: 10,
                      lineHeight: 15,
                      align: 'left',
                      color: '#fff',
                      padding: [2, 4]
                    },
                    c: {
                      fontSize: 10,
                      lineHeight: 15,
                      align: 'left',
                      padding: [2, 4]
                    },
                    per: {
                      fontSize: 10,
                      lineHeight: 15,
                      color: '#eee',
                      backgroundColor: '#334455',
                      padding: [0, 2],
                      borderRadius: 1
                    }
                  }
                }
              }
            }
            this.chartOptions.optionB2.legend = {
              orient: 'vertical',
              left: 'left',
              data: result.legend
            }
            this.charts.chartB2.setOption(this.chartOptions.optionB2, true)
            this.charts.chartB2.hideLoading()
            this.charts.chartB2.resize()
          }
        }).finally(() => {
        })
      },
      loadChartC () {
        // 第三个表
        if (this.params.singTime instanceof Date) {
          this.params.singTime = this.params.singTime.format('yyyy-MM-dd hh:mm:ss')
        }
        if (this.props.propC === '瞬时水量') {
          this.params.dataType = '实时水量'
        } else {
          this.params.dataType = this.props.propC
        }
        this.charts.chartC.showLoading({text: '请求数据.....'})
        this.params.devId = this.getDevId(this.props.propX)
        window.myapi.do_post('file/charts', this.params).then(resp => {
          if (resp.status === 200) {
            this.charts.chartC.clear()
            let result = resp.data.data

            if (this.props.propC === '累积水量') {
              this.chartOptions.optionC.title = {
                text: result.title,
                textStyle: {
                  color: '#d3d3d3',
                  fontSize: 14
                },
                left: 'center',
                top: 'bottom'
              }
              this.chartOptions.optionC.yAxis = [
                {
                  type: 'value',
                  splitLine: {
                    show: false
                  },
                  name: '累积水量(t)'
                }

              ]
              this.chartOptions.optionC.tooltip = {
                formatter: '{b} ：  {c}  t',
                trigger: 'axis'
              }
              this.chartOptions.optionC.xAxis.data = result.xData
              this.chartOptions.optionC.series[0] = {
                data: result.yData,
                type: 'bar',
                itemStyle: {
                  color: '#2d8cf0'
                },
                animation: true
              }
            }
            if (this.props.propC === '瞬时水量') {
              this.chartOptions.optionC.title = {
                text: result.title,
                textStyle: {
                  color: '#d3d3d3',
                  fontSize: 14
                },
                left: 'center',
                top: 'bottom'
              }
              this.chartOptions.optionC.yAxis = [
                {
                  type: 'value',
                  splitLine: {
                    show: false
                  },
                  name: '瞬时水量(t/min)'
                }
              ]
              this.chartOptions.optionC.tooltip = {
                formatter: '{b} ：  {c}  t/min',
                trigger: 'axis'
              }
              this.chartOptions.optionC.xAxis.data = result.xData
              this.chartOptions.optionC.series[0] = {
                data: result.yData,
                type: 'line',
                smooth: true,
                animation: true,
                showSymbol: false
              }
            }

            this.charts.chartC.setOption(this.chartOptions.optionC, true)
            this.charts.chartC.hideLoading()
            this.charts.chartC.resize()
          }
        }).finally(() => {
        })
      },
      getDevId (text) {
        let findOne = this.workShopName.find(item => item.name === text)
        return findOne.id
      },
      initCharts: function () {
        if (this.charts.chartA == null) {
          // 在 显示/隐藏的组件内，必须初始化时候，设定长宽，才能渲染图标 222
          this.charts.chartA = this.$echarts.init(document.getElementById('chartAssb1'))
          this.charts.chartA2 = this.$echarts.init(document.getElementById('chartAss2b3'))
          this.charts.chartB = this.$echarts.init(document.getElementById('chartBb2'))
          this.charts.chartB2 = this.$echarts.init(document.getElementById('chartB2B2b4'))
          this.charts.chartC = this.$echarts.init(document.getElementById('chartCb5'))
          window.onresize = () => {
            this.charts.chartA.resize()
            this.charts.chartA2.resize()
            this.charts.chartB.resize()
            this.charts.chartB2.resize()
            this.charts.chartC.resize()
          }
          this.loadCartsDatas()
        }
      },
      loadDatas () {
        // 加载总数据
        this.loadChartA()
        this.loadChartB()
        this.loadChartA2()
        this.loadChartB2()
        this.loadChartC()
      },
      tabSelect (e) {
        this.tabActive = e
        console.log('edit', e)
      },
      doSearch () {
        if (this.params.singTime instanceof Date) {
          this.params.singTime = this.params.singTime.format('yyyy-MM-dd hh:mm:ss')
        }
        this.loadDatas()
      }
    }
  }
</script>

<style scoped>
  .chaBg {
    padding: 5px;
  }

  ul, li {
    margin: 0;
    list-style: none;
  }

  .search-bar {
    height: 50px;
    line-height: 50px;
    background: #fff;
    border-bottom: solid 1px #ede8e8ab;
  }

  .ivu-menu-horizontal.ivu-menu-light:after {
    background: none;
  }

  /*ggg44444*/
  .ivu-menu-item {
    font-size: 18px;
    padding: 0 5px;
    margin: 0 15px;
  }

  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover {
    border-bottom-width: 4px;
    color: #4e78fe;
    border-color: #4e78fe;
  }

  .ivu-menu-horizontal {
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    display: inline-block;
  }

  /*分割线*/
  .line {
    height: 30px;
    width: 1px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
    background: #d6dbe3;
    margin-right: 50px;
  }

  .picture {
    padding: 5px;
    background: #f0f2f5;
  }

  .bdss {
    width: 20%;
    height: 120px;
    float: left;
    border: solid 1px #ede8e8ab;
    background: #f6f2f273;
  }

  .bdssee {
    width: 1%;
    height: 200px;
    float: left;
  }

  .dssx {
    width: 78%;
    float: left;
    height: 120px;
    /*border: solid 1px #ede8e8ab;*/
  }

  .monkey {
    width: 70%;
    border-top: 1px solid rgba(237, 232, 232, 0.67);
    padding: 5px 10px;
    position: absolute;
    bottom: -38px;
    left: 30%;
    text-align: right;
  }

  /*// sd*/
  .monkey1 {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 30px;
  }

  .monkey22 {
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 20px;
  }

  .kki {
    width: 70%;
    border-bottom: solid 1px #ede8e8ab;
    padding: 5px 10px;
  }

  .kkir {
    width: 70%;
    /*border-bottom: solid 1px #ede8e8ab;*/
    padding: 2px 10px;
  }

  /**
  爱的发生的发
   */
  .ddssoo {
    width: 24%;
    border: solid 1px #ede8e8ab;
    height: 48%;
    margin-bottom: 5px;
    float: left;
    margin-right: 5px;
    background: #f6f2f273;
  }

  .opop1 {
    width: 100%;
    height: 300px;
  }

  .opop2 {
    width: 65%;
    height: 300px;
    float: left;
    background: #fff;
  }

  .opop3 {
    width: 34%;
    float: left;
    height: 300px;
    background: #fff;
  }

  .opop4 {
    width: 100%;
    height: 350px;
    background: #fff;
    margin-top: 10px;
  }

  .opop5 {
    height: 300px;
    width: 1%;
    float: left;
  }

  .ddaa {
    height: 45px;
    width: 100%;
    border-bottom: 1px solid #ede8e8ab;
  }
  .da{
    height: 45px;
    line-height: 45px;
    font-size: 18px;
    font-weight: 500;
    padding: 0px 10px;
    float: left;
  }
  .daa{
    height: 45px;
    line-height: 45px;
    font-size: 18px;
    font-weight: 500;
    padding: 0px 10px;
    float: right;
  }
</style>
